<template>
  <div class="user_right fl ml20">
    <div class="g-memberContainer g-orderDetail">
      <div class="title-member">
        <h2>我的订单详情</h2>
      </div>
      <div class="m-orderMsg">
        <div class="title-member-sub">
          <h3>订单信息</h3>
        </div>
        <div class="flex cnt">
          <div class="cell fixed status">
            <i class="icon-sidebar_huowu"></i>
            {{order.status == 'pending'?'待处理':order.status == 'paying'?'待审核':order.status == 'paid'?'已支付':order.status=='closed'?'已作废':order.status === 'received'?'已收货':'待收货'}}
          </div>
          <div class="cell fixed">
            <p>
              <span class="tt">订单编号：</span>
              <em>{{order.no}}</em>
            </p>
            <p>
              <span class="tt">下单时间：</span>
              <em>{{order.paid_at | formatDate}}</em>
            </p>
            <p>
              <span class="tt">订单备注：</span>
              <em></em>
            </p>
          </div>
          <div class="cell">
            <p>
              <span class="tt">支付方式：</span>
              <em>{{paymentDict[order.payment_method]}}</em>
            </p>
            <p>
              <span class="tt">配送方式：</span>
              <em>工流界配送</em>
            </p>
            <p>
              <span class="tt">支付状态：</span>
              <em>{{skipStatusDict[order.status]}}</em>
            </p>
          </div>
          <div class="cell">
            <p>
              <span class="tt">商品金额：</span>
              <em class="price">¥{{order.total_amount}}</em>
            </p>
            <p>
              <span class="tt">运费：</span>
              <em class="price">¥0.00</em>
            </p>
            <p>
              <span class="tt">应付总额：</span>
              <em class="price">¥{{order.total_amount}}</em>
            </p>
          </div>
        </div>
        <div class="tools">
          <el-button v-if="order.status === 'pending'" type="text" @click="cancelOrder">取消订单</el-button>
          <router-link :to="`/pay/${order.id}`">
            <el-button type="text">查看汇款信息</el-button>
          </router-link>
          <a :href="'https://admin.haoglj.com/api/v1/orders/'+ dingId +'/contract'">
            <el-button type="text">购销合同</el-button>
          </a>

          <a :href="'https://admin.haoglj.com/api/v1/orders/'+ dingId +'/sale_list'">
            <el-button type="text">销售单</el-button>
          </a>
           <el-button
            @click="goodsReceipt(order.id)"
            type="text"
            v-if="order.status === 'delivered'"
          >确认收货</el-button>
          <el-button
            @click="getlogistics"
            type="text"
            v-if="order.status !== 'paying'&& order.status != 'pending' "
          >查看物流</el-button>
        </div>
      </div>
      <div class="m-address">
        <div class="title-member-sub">
          <h3>收货地址</h3>
        </div>
        <ul>
          <li>
            <span class="tt">{{ order.address.contact_name }}</span>
            {{order.address.contact_phone}}
          </li>
          <li>
            <span class="ads">{{order.address.address}}</span>
            <span class="ads"></span>
          </li>
        </ul>
      </div>
      <div class="m-orderDetail-list">
        <div class="title-member-sub">
          <h3>订单明细</h3>
        </div>
        <table class="table-member">
          <thead>
            <tr>
              <th width="160">型号</th>
              <th width="140">订货号</th>
              <th width="120">市场价（￥）</th>
              <th>
                <div class="diff diff-price">
                  <span class="prev">会员价</span>
                </div>
              </th>
              <th>
                <div class="diff">
                  <span class="prev">数量</span>
                </div>
              </th>
              <th width="160">小计（￥）</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in order.items" :key="item.id">
              <td>{{item.product.model_name}}</td>
              <td>{{item.product.part_number}}</td>
              <td>{{item.product.price}}</td>
              <td>
                <div class="diff diff-price">
                  <span
                    class="prev"
                  >{{Number(item.product.discount_price.toString().match(/^\d+(?:\.\d{0,2})?/))}}</span>
                </div>
              </td>
              <td>
                <div class="diff">
                  <span class="prev">{{item.amount}}</span>
                </div>
              </td>
              <td>
                <p class="price">{{(item.product.discount_price*item.amount).toFixed(2)}}</p>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="m-price">
          <div class="flex">
            <div class="cell" style="margin-bottom: 12px;">
              <p>商品金额：</p>
              <p>运费：</p>
              <p>优惠：</p>
              <p class="totalPrice-tt">应付总额：</p>
            </div>
            <div class="cell fixed cnt">
              <p>¥ {{order.total_amount}}</p>
              <p>¥ 0.00</p>
              <p>¥ 0.00</p>
              <p class="totalPrice" style="padding-top: 5px;">¥ {{order.total_amount}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="物流信息" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <div class="block">
        <div class="logistics_Info">
          <span>收货地址:{{order.address.address}}</span>
        </div>
        <div class="logistics_tap">
          <div  v-for="(item,index) in logisticsList" :key="item.id">
          <div @click="texss(index)" :class="wlindex == index?'redb':'hei'" style="margin:0 15px;padding:5px 10px;display: flex;align-items: center;">
            <div><img v-show="wlindex == index" style="width: 25px;" src="../../../assets/img/wlwza.png" alt="">
            <img v-show="wlindex != index" style="width: 25px;" src="../../../assets/img/wlwzb.png" alt="">
            </div>
            <div>
            <div>快递公司:{{item.express_no}}</div> <div>快递单号: {{item.express_company}}</div></div></div>
        </div>
        </div>
        <el-timeline>
          <div v-for="(itema) in logisticsData" :key="itema.time">
            <el-timeline-item :timestamp="itema.taday" placement="top">
              <el-card>
                <h4>{{itema.context}}</h4>
                <p>{{itema.time}}</p>
              </el-card>
            </el-timeline-item>
          </div>
        </el-timeline>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  orderDetail,
  closeOrder,
  // getcontract,
  getLogisticsData,
  confirmGoods
} from '@/api/order'
import { mapMutations } from 'vuex'
import { paymentDict, skipStatusDict } from '@/utils/dict'
import { formatTime } from '@/utils'
export default {
  name: 'rt-order-detail',
  metaInfo: {
    title: '订单详情'
  },
  data () {
    return {
      order: {
        address: {
          address: '',
          contact_name: '',
          contact_phone: ''
        }
      },
      paymentDict,
      skipStatusDict,
      a_hetong: '',
      a_xiaos: '',
      dingId: '',
      dialogVisible: false,
      logisticsList: [],
      wlindex: 0,
      logisticsData: ''
    }
  },
  created () {
    this.fetchOrderDetail()
    this.setHasNav(false)
  },
  methods: {
    ...mapMutations({
      setHasNav: 'app/SET_PAGE_HAS_NAV'
    }),
    async fetchOrderDetail () {
      try {
        this.order = await orderDetail(this.$route.params.id)
        console.log(this.order)
        console.log('----------------')
        this.dingId = this.order.id
      } catch (e) {
        console.log(e)
      }
    },
    cancelOrder () {
      this.$confirm('确认取消订单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          try {
            await closeOrder(this.order.id)
            this.$message.success('订单已取消！')
            this.$router.push('/my/order')
          } catch (e) {
            console.log(e)
          } finally {
            loading.close()
          }
        }).catch(res => {
          console.log(res)
        })
    },
    // goPay () {
    //   this.$router.push('/pay/' + this.order.id)
    // },
    // async getcontractbtn () {
    //   const resa = await getcontract(this.order.id)
    // },
    async getlogistics () {
      const res = await getLogisticsData(this.order.id)
      this.logisticsList = res
      console.log(res)
      this.dialogVisible = true
      this.logisticsData = res[0].data
      for (let i = 0; i < this.logisticsList.length; i++) {
        for (let j = 0; j < this.logisticsList[i].data.length; j++) {
          this.logisticsList[i].data[j].taday = this.logisticsList[i].data[j].time.trim().split(/\s+/)[0]
        }
      }
      console.log(this.logisticsList)
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    texss (index) {
      this.wlindex = index
      this.logisticsData = this.logisticsList[index].data
      console.log(this.logisticsList[index].data[1].time.trim().split(/\s+/))
    },
    // 收货
    goodsReceipt (id) {
      this.$confirm('此操作将确认收货, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        confirmGoods(id)
        this.$message({
          type: 'success',
          message: '收货成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消收货'
        })
      })
    }
  },
  filters: {
    formatDate (value) {
      if (!value) return
      return formatTime(new Date(value))
    }
  }
}
</script>

<style lang="scss" scoped>
.title-member {
  border-bottom: 2px solid #e6e6e6;
}

.title-member h2 {
  display: inline-block;
  line-height: 1em;
  padding: 18px 0;
  margin-bottom: -2px;
  color: #4448f8;
  font-size: 18px;
  border-bottom: 2px solid #4448f8;
}
.m-orderDetail-list .table-member {
  margin-top: 22px;
}

.g-orderDetail {
  font-size: 14px;
  padding: 0 15px;
}

.g-orderDetail .m-orderMsg {
  margin-top: 32px;
  color: #000;
  font-size: 14px;
}

.g-orderDetail .m-orderMsg > .cnt {
  margin-top: 22px;
}

.g-orderDetail .m-orderMsg .cnt p {
  padding: 8px 0;
}

.g-orderDetail .tools {
  margin-top: 20px;
  text-align: right;
  color: #12c3c6;
}

.g-orderDetail .tools a {
  display: inline-block;
  padding: 0 14px;
  font-size: 12px;
}

.g-orderDetail .tools i {
  font-size: 18px;
  margin-right: 6px;
  vertical-align: middle;
}

.g-orderDetail .m-orderMsg .cell {
  padding: 0 24px;
  border-right: 1px solid #e7e7e7;
}

.g-orderDetail .m-orderMsg .cell .tt {
  display: inline-block;
  width: 70px;
  text-align: right;
}

.g-orderDetail .m-orderMsg .cell em {
  display: inline-block;
  max-width: 160px;
  vertical-align: top;
  word-break: break-all;
}

.g-orderDetail .m-orderMsg .cell .price {
  color: #ff0000;
}

.g-orderDetail .m-orderMsg .cell:first-child,
.g-orderDetail .m-orderMsg .cell:last-child {
  border-right: 0;
}

.g-orderDetail .m-orderMsg .status {
  width: 210px;
  color: #eb615f;
  font-size: 30px;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
}

.g-orderDetail .m-orderMsg .status i {
  vertical-align: -10px;
  font-size: 70px;
}

.g-orderDetail .m-orderMsg .status2 {
  color: #02b4b8;
}

.g-orderDetail .m-orderMsg .status3 {
  color: #7e7e7e;
}

.g-orderDetail .m-address {
  margin-top: 4px;
}

.g-orderDetail .m-address ul {
  padding: 24px 46px;
}

.g-orderDetail .m-address ul li {
  padding: 6px 0;
}

.g-orderDetail .m-address ul li .tt {
  margin-right: 20px;
}

.g-orderDetail .m-address ul li .ads {
  margin-right: 10px;
}

.title-member-sub {
  position: relative;
  color: #000;
  font-size: 14px;
}

.title-member-sub h3 {
  position: relative;
  display: inline-block;
  padding-right: 15px;
  background: #fff;
  font-size: 14px;
}

.table-member {
  width: 100%;
  font-size: 12px;
  text-align: center;
}

.table-member thead th {
  height: 40px;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  box-sizing: border-box;
  text-align: center;
  background: #f8f8f8;
}

.table-member thead th:first-child {
  border-left: 1px solid #e6e6e6;
}

.table-member thead th:last-child {
  border-right: 1px solid #e6e6e6;
}

.table-member tbody td {
  padding: 14px 2px;
  border-bottom: 1px solid #e6e6e6;
}

.table-member tbody td .icon {
  color: #4448f8;
  font-size: 26px;
}

.table-member tbody td input {
  text-align: center;
}

.table-member tbody td .inventory {
  position: relative;
  margin: 4px auto;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
}

.table-member tbody td .inventory span {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 39px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background-color: #4448f8;
}

.table-member tbody td .inventory2 span {
  background-color: #eb6262;
}

.table-member tbody td .inventory3 span {
  background-color: #fece00;
}

.table-member tbody td .inventory em {
  display: block;
  height: 20px;
  line-height: 18px;
  box-sizing: border-box;
  border-width: 1px 1px 1px 0;
  border-style: dashed;
  border-color: #4448f8;
  text-align: left;
  padding: 0 4px 0 44px;
  overflow: hidden;
}

.table-member tbody td .inventory2 em {
  border-color: #eb6262;
}

.table-member tbody td .inventory3 em {
  border-color: #fece00;
}

.table-member tbody td .price {
  color: #ff0000;
}

.table-member .diff {
  width: 116px;
}

.table-member .diff-price {
  width: 150px;
}

.table-member .diff .prev {
  padding-right: 9px;
}
.m-orderDetail-list .table-member {
  margin-top: 22px;
}

.g-orderDetail .m-price {
  text-align: right;
  padding: 10px 32px;
  background: #f8f8f8;
}

.g-orderDetail .m-price .cnt {
  padding-left: 10px;
}

.g-orderDetail .m-price p {
  padding: 6px 0;
  font-size: 12px;
}

.g-orderDetail .m-price .totalPrice {
  color: #ff0000;
  font-size: 30px;
  font-weight: bold;
}

.g-orderDetail .m-price .totalPrice-tt {
  padding: 22px 0 0;
}
.logistics_Info {
  margin-bottom: 20px;
  span {
    margin-right: 20px;
  }
}
.logistics_tap{
  display: flex;
  margin-bottom: 20px;
  div{
    cursor: pointer;
  }
}
.redb{
  border: 1px dashed red;
}
.hei{
  border: 1px dashed;
}
</style>
